<template>
    <div>
        <div :class="isUpdate&&'fadeIn'">
            <div class="theme-2" v-if="templateStyle==='level-2'">
                <div class="box">
                    <textarea class="box-answer" v-model="text"
                              @input = "answerHandler($event)">
                    </textarea>
                </div>
                <label class="upload-btn">
                    <input type="file" style="display: none" @change="getFile($event)" >
                </label>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState, mapActions, mapMutations} from 'vuex';
    import R from 'ramda';
    import loadingImage from '~/components/loadingImage'

    export default {
        async fetch({store, params}) {
            await store.dispatch("index/exercise/index/setContentInfo", params);
        },
        data() {
            return {
                isUpdate: false,
                text: ''
            }
        },
        methods: {
            ...mapActions('index/exercise/index', [
                'setAudioInfo',
                'setAudioUrl',
                'setAnswer',
                'setMyAnswer'
            ]),
            ...mapMutations('index/exercise/index', [
                'CompareControl','UPLOAD_FILE'
            ]),
            getFile(event) {
                this.UPLOAD_FILE(event.target.files[0]);
                this.setAnswer({
                    answer: true,
                    msg: this.content.audio
                })
                console.log(this.content);
            },
            answerHandler(ev) {
                this.setAnswer({
                    answer: true,
                    msg: this.content.audio
                })
                this.setMyAnswer(ev.target.value);
            },
            init() {
                this.$nextTick(_ => {
                    this.CompareControl(false);
                })
                if (this.content.audio) {
                    this.setAudioInfo({player: {display: 'block'}});
                    this.setAudioUrl(this.content.audio);
                }
            }
        },
        destroyed() {
            this.CompareControl(null);
        },
        mounted() {
            this.init();
        },
        created() {
            console.log(this.content)

        },
        computed: {
            ...mapState('index/exercise/index', {
                templateStyle: state => state.templateStyle,
                content: state => state.contentInfo ? state.contentInfo.content : {},
                showCompare: state => state.showCompare,
            }),
        },
        watch: {
            content() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                this.text = '';
                const initData = {};
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600)
                this.init();
            }
        },
        components: {loadingImage,}
    }
</script>

<style lang="less" scoped>
    .fadeIn {
        animation: fadeIn .4s ease-in;
        transform: translateZ(0);
    }

    @keyframes fadeIn {
        from {
            transform-origin: left;
            transform: scaleX(.4);
            opacity: 0;
        }
    }

    .coming-soon {
        width: 600px;
        height: 236px;
        margin: 100px auto auto auto;
        background: url(~~assets/img/exercise/coming.png) no-repeat;
        background-size: 100% 100%;
    }

    .theme-2 {
        .box {
            display: inline-block;
            width: 558px;
            height: 300px;
            position: absolute;
            top: 15%;
            left: 25%;
            padding: 48px 0px 84px 75px;
            background: url(~~assets/img/exercise/level2/xiangkuangshu.png) no-repeat;
            background-size: 100% 100%;
            .box-answer {
                width: 504px;
                height: 343px;
                padding: 10px 0 0 10px;
                border-radius: 8px;
                border: none;
                outline: none;
                overflow: hidden;
                font-style: normal;
                font-size: 20px;
                color: #333;
            }
        }
        .upload-btn {
            width: 150px;
            height: 150px;
            position: absolute;
            top: 38%;
            left: 75%;
            background: url(~~assets/img/exercise/level2/updown.png) no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }
    }
</style>
